<template>
  <div class="VSelect">
    <h1>This is an VSelect page</h1>
    <a-select default-value="lucy" style="width: 120px">
      <a-select-option value="jack">
        Jack
      </a-select-option>
      <a-select-option value="lucy">
        Lucy
      </a-select-option>
      <a-select-option value="disabled" disabled>
        Disabled
      </a-select-option>
      <a-select-option value="Yiminghe">
        yiminghe
      </a-select-option>
    </a-select>

    <a-select
      show-search
      placeholder="Select a person"
      option-filter-prop="children"
      style="width: 200px"
      :filter-option="filterOption"
      @focus="handleFocus"
      @blur="handleBlur"
      @change="handleChange"
    >
      <a-select-option value="jack">
        Jack
      </a-select-option>
      <a-select-option value="lucy">
        Lucy
      </a-select-option>
      <a-select-option value="tom">
        Tom
      </a-select-option>
    </a-select>

    <a-select
      mode="multiple"
      placeholder="Inserted are removed"
      :value="selectedItems"
      style="width: 100%"
      @change="handleChange2"
    >
      <a-select-option
        v-for="item in filteredOptions"
        :key="item"
        :value="item"
      >
        {{ item }}
      </a-select-option>
    </a-select>

    <a-select
      v-model="value"
      mode="multiple"
      style="width: 100%"
      placeholder="select one country"
      option-label-prop="label"
    >
      <a-select-option value="china" label="China">
        <span role="img" aria-label="China">
          🇨🇳
        </span>
        China (中国)
      </a-select-option>
      <a-select-option value="usa" label="USA">
        <span role="img" aria-label="USA">
          🇺🇸
        </span>
        USA (美国)
      </a-select-option>
      <a-select-option value="japan" label="Japan">
        <span role="img" aria-label="Japan">
          🇯🇵
        </span>
        Japan (日本)
      </a-select-option>
      <a-select-option value="korea" label="Korea">
        <span role="img" aria-label="Korea">
          🇰🇷
        </span>
        Korea (韩国)
      </a-select-option>
    </a-select>
  </div>
</template>

<script>
const OPTIONS = ["Apples", "Nails", "Bananas", "Helicopters"];
export default {
  data() {
    return {
      value: ["china"],
      selectedItems: []
    };
  },
  watch: {
    value(val) {
      console.log(`selected:`, val);
    }
  },
  computed: {
    filteredOptions() {
      return OPTIONS.filter(o => !this.selectedItems.includes(o));
    }
  },
  methods: {
    handleChange2(selectedItems) {
      this.selectedItems = selectedItems;
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    handleBlur() {
      console.log("blur");
    },
    handleFocus() {
      console.log("focus");
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    }
  }
};
</script>
